<template>
  <div>
    <!-- 头部导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/goodsList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryData" class="input-with-select" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
    <!-- 列表区域 -->
    <el-table :data="adminsData" style="width: 100%" border stripe class="datalist">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="adminname" label="账户名" width="280"></el-table-column>
      <el-table-column prop="password" label="密码" width="280" ></el-table-column>
      <el-table-column prop="state" label="是否可用">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            @change="changeAadminState(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="showEditDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteAdmin(scope.row._id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改用户的对话框 -->
    <el-dialog title="修改管理员账户" :visible.sync="dialogShow" width="30%">
      <el-form :model="updateData" :rules="updateRules" ref="updateForm" label-width="100px">
        <el-form-item label="管理员账号">
          <el-input v-model="updateData.adminname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="updateData.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="updateAadmin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      adminsData: [],
      updateData: {
        _id:'',
        adminname: "",
        password: "",
        state:""
      },
      // 查询数据
      queryData:'',
      //控制修改用户对话框的显示与否
      dialogShow: false,
      updateRules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      axios.get("/admins/getlist",{params:{adminname:this.queryData}}).then(res => {
        this.adminsData = res.data;
      });
    },
    showEditDialog(data) {
      this.updateData.adminname = data.adminname;
      this.updateData.password = data.password;
      this.updateData._id = data._id
      this.updateData.state = data.state
      //     axios.get("/admins/getOne",{params: {id}}).then(res => {
      //   this.adminsData = res.data;
      // });
      this.dialogShow = true;
    },
    //更改管理员可用状态
    changeAadminState(admininfo) {
      axios.put("/admins", admininfo).then(res => {
        if (res.data) {
          this.$message({
            showClose: true,
            message: "更改成功",
            type: "success"
          });
        } else {
        }
      });
    },
    deleteAdmin(delteInfo) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.delete("/admins", { data: { _id: delteInfo } }).then(res => {
            if (res.data) {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              this.getList()
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updateAadmin() {
      axios.put("/admins", this.updateData).then(res => {
        if (res.data) {
          this.$message({
            showClose: true,
            message: "更改成功",
            type: "success"
          });
          this.dialogShow = false;
          this.getList()
        } else {
        }
      });
    },
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 15px;
}
.datalist {
  margin-top: 10px;
}
</style>